{% extends "homepage.html" %}

{% block content -%}
<style text="text/css">
#knowls a {
  display: block;
}
#knowls a > span:last-child {
  font-size: xx-small;
  color: grey;
  position: relative;
  top: -0.7em;
}
#knowls td div {
  display: inline;
  width: 165px;
  float: left;
  min-height: 4em;
}
#knowls td { 
  padding: 10px 0px;
}
#knowls tr td:first-child {
  width: 50px;
  vertical-align: top;
  text-align: center;
  font-size: x-large;
  color: #006;
}
a.curcat {
  font-weight: bold;
  border-bottom: 1px solid #006;
}
</style>

{% if not searchmode and not categorymode %}
<div style="margin-bottom: 10px">
  <form method="GET" action="{{ url_for('.index') }}">
    {% for kq in knowl_qualities -%}
      <input type="checkbox" id="{{ kq }}" name="{{ kq }}" {% if filters[loop.index0] -%}checked{%- endif %} />
        <label for="{{ kq }}">{{ kq|capitalize }}</label>
    {%- endfor %}
    <button type="submit" name="filter">Filter</button>
  </form>
  </div>
{% endif %}

<div style="margin-bottom: 10px">
Category:
{% for cat in categories -%}
 <a 
  {% if cur_cat == cat -%}class='curcat'{%- endif %}
  href="{{ url_for('.index', category = cat) }}">{{cat}}</a>
   {# {% if not loop.last -%} &middot; {%- endif %} #}
{%- endfor %}
&mdash; <strong><a href="{{ url_for('.index') }}">clear</a></strong>
</div>

<table id="knowls" class="ntdata">
  {% for c, ks in knowls -%}
   <tr>
    <td>{{ c }}</td>
    <td>
      {% for k in ks %}
        <div><a href="{{ url_for('.show', ID=k._id) }}">{{ k.title|safe }}<br/>
             <span>{{ k._id }}</span></a></div>
      {% endfor %}
     </td>
   </tr>
  {%- endfor %}
</table>

{% if user_is_authenticated -%}
  <hr/>
  <h2>Edit/Create Knowls</h2>
  <form action="{{ url_for('.edit_form') }}" method="POST">
    Knowl ID: <input id="knowl-edit-id" name="id"></input>
    <button id="knowl-edit-btn">Edit</button>
  </form>
{%- endif %}

{%- endblock %}
